<template>
  <div>
    <div class="respage" v-if="resList.artist">
      <div
        ref="songerdiv"
        class="songer"
        :id="resList.artist[0].id"
        @click="$emit('songerIndex')"
      >
        <img :src="resList.artist[0].picUrl" alt="" />
        <div class="songername">
          <span>歌手：{{ resList.artist[0].name }}</span>
        </div>
        <i class="iconfont icon-youjiantou"></i>
      </div>
      <div
        class="songer playlist"
        v-if="resList.playlist"
        @click="$emit('songlistdetail', resList.playlist[0].id)"
      >
        <img :src="resList.playlist[0].coverImgUrl" alt="" />
        <div class="songername">
          <span>歌单：{{ resList.playlist[0].name }}</span>
          <p class="creator">by {{ resList.playlist[0].creator.nickname }}</p>
        </div>
        <i class="iconfont icon-youjiantou"></i>
      </div>
      <RecomItem
        v-for="(item, index) in resSong"
        :index="index + 1"
        @click.native="$emit('update:currentSong', item)"
        :key="item.id"
        :item="item"
        :currentSong="currentSong"
        :playing="playing"
      ></RecomItem>
    </div>
    <LoadingView v-else></LoadingView>
  </div>
</template>

<script>
import RecomItem from "@/components/RecomItem.vue";
import LoadingView from "@/components/LoadingView.vue";
export default {
  props: {
    resList: Object,
    resSong: Array,
    currentSong: Object,
    playing: Boolean,
  },
  components: {
    RecomItem,
    LoadingView,
    // SongerDetail
  },
  data: function () {
    return {
      songermsg: {},
    };
  },
  mounted: function () {
    setTimeout(() => {
      let id = this.$refs.songerdiv.id;
      this.axios
        .get(`https://apis.netstart.cn/music/artist/detail?id=${id}`)
        .then((res) => {
          this.songermsg = res.data.data;
          console.log(this.songermsg);
          this.$emit("update:songermsg", this.songermsg);
        });

    },100);
  },
  watch: {
    resList: function () {
      this.$nextTick(function () {
        this.axios
          .get(
            `https://apis.netstart.cn/music/artist/detail?id=${this.$refs.songerdiv.id}`
          )
          .then((res) => {
            this.songermsg = res.data.data;
            this.$emit("update:songermsg", this.songermsg);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.respage {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  .songer {
    display: flex;
    align-items: center;
    width: 339px;
    height: 50px;
    padding: 8px 10px 8px 0px;
    box-sizing: content-box;
    border-bottom: 1px solid #9999b3;
    .songername {
      flex: 1;
      font-size: 18px;
      //   flex-wrap: wrap;
      span {
        display: inline-block;
        width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      p {
        flex: 1;
        color: #9999b3;
        font-size: 12px;
      }
    }
    img {
      width: 50px;
      height: 50px;
      margin: 0px 20px 0px 0px;
      display: block;
    }
  }
  .creator {
    position: absolute;
  }
  li {
    width: 90%;
  }
}
</style>